<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户名登陆</title>
    <link href="../css/username.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div id="header">
        <p>
            <span>图书管理系统登录页面</span>
            <input type="button" value="登录" id="login">
            <input type="button" value="注册" id="crtbtn">
        </p>
    </div>
    <div id="userDic">
        <div id="user">
            <span id="spanUser" >用户名</span><input type="text" id="userInp"><br>
            <span id="spanPwd">密码</span><input type="password" id="pwdInp"><br>
            <button id="btn">登陆</button><button id="offbtn">关闭</button>
        </div>
    </div>
    <div id="zhuce">
        <div id="creDiv">
            <span id="creUser">用户名</span><input type="text" id="createUsername"><br>
            <span id="crePwn">密码</span><input type="password" id="createPwd"><br>
            <button id="createSuccess">确定注册</button>
            <button id="offcreate">取消注册</button>
        </div>
    </div>
</body>
<script type="text/javascript">
//    点击登录按钮时候显示出登录界面
    $("#login").on("click",function () {
        $("#userDic").css("display","block");
    })

//    用JQ的方法给id为btn的登录按钮设置点击函数；
    $("#btn").on("click",function () {
//        创建ajax获取登陆页面的数据
        var objs={
            username:$("#userInp").val(),
            password:$("#pwdInp").val()
        }
        $.ajax({
            type:"post",
            url:"http://localhost:6500/bookuse"+"/login",
            data:objs,
            success:function (data) {
                console.log(data.uid);
                localStorage.dataId=data.uid;
                window.open("bookcollation.html");


            }
        })

    });

//    为id是offbtn的按钮添加点击函数；
    $("#offbtn").on("click",function () {
        $("#userDic").css("display","none");
    });

//    给点击注册按钮添加事件
    $("#crtbtn").on("click",function () {
        $("#zhuce").css("display","block");
    });

//     给取消注册按钮添加点击事件
    $("#offcreate").on("click",function () {
        $("#zhuce").css("display","none");
    })

//    给确定注册按钮添加点击事件
    $("#createSuccess").on("click",function () {

        var createObj={
            username:$("#createUsername").val(),
            password:$("#createPwd").val()
        };

        $.ajax({
            type:"post",
            url:"http://localhost:6500/bookuse",
            data:createObj,
            success:function () {
                console.log("你又赢了");
                $("#zhuce").css("display","none");
            }
        })
    })
</script>
</html>